<template>
  <div>
    <Card>
      <div slot="title" class="box2">
        <div>商品分类</div>
        <el-button size="mini" type="primary" @click="btn">添加分类</el-button>
      </div>
      <div slot="title1">
        <!--表格 -->
        <el-table height="500" :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="序号" width="180">
            <template slot-scope="scope">
              <div>{{ scope.row.id }}</div>
            </template>
          </el-table-column>

          <el-table-column label="分类名称" width="200">
            <!-- 手动添加的查抄 -->
            <template slot-scope="scope">
              <!-- 把这个值赋值在这 -->
              <div v-if="scope.row.xinzen">{{ scope.row.cateName }}</div>
              <!-- 把它的值绑定在表单上 这样就可以直接修改它的值-->
              <el-input
                v-else
                v-model="scope.row.cateName"
                size="mini"
              ></el-input>
            </template>
          </el-table-column>

            <!-- 按钮 -->
            <!-- 手动添加的查抄 -->
          <el-table-column label="是否启用" width="200">
            <template slot-scope="scope">
              <!-- disabled  由于所有的都会受到它的影响 所以采用表单里的值来判断它 判断它 -->
              <el-switch
                :disabled="scope.row.xinzen"
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.xinzen"
                size="mini"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >

              <el-button
                v-else
                size="mini"
                type="success"
                @click="wancheng(scope.row)"
                >完成</el-button
              >

              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页功能 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curpage"
          :page-sizes="[1, 5, 10, 50]"
          :page-size="papage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <!-- 这是一个弹出框 -->
        <el-dialog title="添加分类" :visible.sync="dia">
          <el-form :model="form">
            <el-form-item label="分类名称" label-width="120">
              <el-input style="width:300px" v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否启用" label-width="80">
                <el-switch
                v-model="form.value"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dia = false">取 消</el-button>
            <el-button type="primary" @click="queding"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 删除弹出框 -->

      </div>
    </Card>
  </div>
</template>

<script>
//引入接口
import { apihushop_js, apishopxug_js, apishopdel_js ,apirjfl_js } from "@/utils/api.js";

import Card from "@/components/Card.vue";
export default {
  components: {
    Card,
  },

  data() {
    return {
      //商品分类
      tableData: [],
      //页数
      curpage: 1,
      //条数
      papage: 10,
      //总条数
      total: 200,
      //按钮
      value: true,
      //定义标杆 用来判断它的显示和隐藏 采用v-if
      //这是一个弹出框
      dia:false,

      form:{
        name:"",
        value:true,
      }
    };
  },
  methods: {
    //自定义函数
    async getlist() {
      let { data, total } = await apihushop_js({
        //页数
        currentPage: this.curpage,
        //条数
        pageSize: this.papage,
      });
      //首先拿到数组给的值  然后便利出来  获取到最初的状态  然后自定义一个变量保存它的trun和false状态

      data.forEach((item) => {
        //拿到数据库的值  如果是1 就是true  如果是2  就是false
        item.state = item.state==1?true:false;
        item.xinzen = true;
      });
      this.total = total;
      this.tableData = data;
      //页面边界判定
      if(!data.length&&this.curpage>1){
        this.curpage--
        this.getlist()
      }
      console.log(data);
    },
    dialogFormVisible(){},
    //页数
    handleSizeChange(val) {
      this.papage = val;
      //重回视图
      this.getlist();

    },
    //条数
    handleCurrentChange(val) {
      this.curpage = val;
      //重回视图
      this.getlist();
    },
    //编辑
    handleEdit(row) {
      console.log(row);
      row.xinzen = false;
      //点击编辑  让他变成 编辑页面 按钮可以用
    },
    //删除
    async handleDelete(row) {
      //点击删除  调用这个接口
      console.log(row);
      await apishopdel_js({
        id: row.id,
      });
      this.getlist();
    },
    //完成

    async wancheng(row) {
      row.xinzen = true;
      //点击完成  变成固定页面  切按钮禁用
      //点击完成发送修改请求
      console.log(this.tableData);

      let res = await apishopxug_js({
        id: row.id,
        cateName: row.cateName,
        state: row.state,
      });
    },
    //点击添加数据
    btn() {
      this.dia = true;
    },
    async queding(){
      //发送接口 新建
      await apirjfl_js({
        cateName:this.form.name,
        state:this.form.value,
      })
      this.dia = false;
      this.getlist()
    }
  },

  created() {
    this.getlist();
    console.log(this.tableData);
  },
};
</script>

<style lang="less" scoped>
.box2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>